<template>
  <div class="student-info">
    <h2>我的课程信息</h2>
    <el-button type="primary" round class="flash-button" @click="getMyCourse()">刷新课表<el-icon :size="20">
        <Refresh />
      </el-icon>
    </el-button>
    <el-table :data="MyCourse" style="width: 100% ;margin-top: 40px;" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="courseName" label="课程名"></el-table-column>
      <el-table-column prop="teacherId" label="授课教师工号"></el-table-column>
      <el-table-column prop="credits" label="学分"></el-table-column>
      <el-table-column prop="grade" label="成绩(空即成绩未出)"></el-table-column>
    </el-table>
  </div>

  <div class="total-credits">
    总学分: {{ MyGrade }}
  </div>
</template>

<script setup>
import { studentCourseService, studentCreditService } from '@/api/student.js';
import { Refresh } from '@element-plus/icons-vue';
import { ref } from 'vue';
const MyCourse = ref([])
const MyGrade = ref()
//展示我的课程信息
const getMyCourse = async () => {
  const res = await studentCourseService()
  const res2 = await studentCreditService()
  MyGrade.value = res2.data
  MyCourse.value = res.data
  console.log(MyCourse.value);
}
getMyCourse()
</script>

<style scoped>
.total-credits {
  margin-top: 20px;
  font-weight: bold;
}

.flash-button {
  margin-left: 1500px;
}

h2 {
  text-align: center;
}
</style>